import React, { useEffect, useState } from 'react';
import { getTourist } from '@/api/service'
import { Table, Tag } from 'antd';
import { useAddkey } from '@/hooks/index'
import axios from 'axios';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Space } from 'antd'
const columns = [
  {
    title: 'ID',
    dataIndex: 'vsid',
    key: 'vsid',

  },
  {
    title: '游客ID',
    dataIndex: 'visitor_id',
    key: 'visitor_id',
  },
  {
    title: '游客名称',
    dataIndex: 'visitor_name',
    key: 'visitor_name',
  },
  {
    title: 'IP',
    key: 'visitor_ip',
    dataIndex: 'visitor_ip',
  },
  {
    title: '接待客服',
    key: 'kefu_name',
    dataIndex: 'kefu_name',
  },
  {
    title: '开始时间',
    key: 'start_date',
    dataIndex: 'start_date',
  },
  {
    title: '结束时间',
    key: 'end_date',
    dataIndex: 'end_date'
  },
];
const { Search } = Input;

const suffix = (
  <AudioOutlined
    style={{
      fontSize: 16,
      color: '#1890ff',
    }}
  />
);
export default function servicelog() {
  const [data, setData] = useState([]);
  const [total, setTotal] = useState(1);
  useEffect(() => {
    axios.get('/getserviceLog', {
      params: {
        search: ''
      }
    }
    ).then((res: any) => {
      console.log(res);
      useAddkey(res.data);
      setData(res.data);
      setTotal(res.count)
    })
  }, [])
  const onSearch = (value: any) => {
    console.log(value);
    axios.get('/getserviceLog', {
      params: {
        search: value
      }
    }
    ).then((res: any) => {
      console.log(res);
      useAddkey(res.data);
      setData(res.data);
      setTotal(res.count)
    })
  }
  return <div>
    <Space direction="vertical">
      <Search
        placeholder="input search text"
        allowClear
        enterButton="Search"
        size="large"
        onSearch={onSearch}
      />
    </Space>
    <Table
      columns={columns}
      pagination={{
        total,
        pageSize: 5,
        showQuickJumper: true
      }}
      dataSource={data}
    />
  </div>;
}
